<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>闯关结算 - 渐进学习平台</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    /* ===== 基础样式 ===== */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    body {
      background: linear-gradient(135deg, #0a0a2a 0%, #1a1a4a 50%, #0a0a2a 100%);
      color: white;
      min-height: 100vh;
      overflow-x: hidden;
      position: relative;
    }

    /* ===== 背景动画 ===== */
    .stars {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
    }

    .star {
      position: absolute;
      background-color: white;
      border-radius: 50%;
      animation: twinkle 5s infinite;
    }

    @keyframes twinkle {
      0%, 100% { opacity: 0.2; }
      50% { opacity: 1; }
    }

    /* ===== 结算容器 ===== */
    .result-container {
      max-width: 1000px;
      margin: 0 auto;
      padding: 40px 20px;
      text-align: center;
      position: relative;
      z-index: 1;
    }

    /* ===== 结果标题 ===== */
    .result-title {
      font-size: 72px;
      font-weight: bold;
      margin-bottom: 30px;
      text-transform: uppercase;
      letter-spacing: 4px;
      text-shadow: 0 0 20px rgba(255, 255, 255, 0.7);
      opacity: 0;
      transform: translateY(-50px);
    }

    .victory {
      color: #ffd700;
      text-shadow: 0 0 20px rgba(255, 215, 0, 0.7);
    }

    .defeat {
      color: #c41e3a;
      text-shadow: 0 0 20px rgba(196, 30, 58, 0.7);
    }

    /* ===== 段位徽章 ===== */
    .rank-badge {
      width: 200px;
      height: 200px;
      margin: 0 auto 40px;
      position: relative;
      opacity: 0;
      transform: scale(0.5);
    }

    .rank-icon {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 80px;
      position: relative;
      z-index: 2;
    }

    .rank-glow {
      position: absolute;
      top: -10px;
      left: -10px;
      right: -10px;
      bottom: -10px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255,215,0,0.5) 0%, rgba(255,215,0,0) 70%);
      z-index: 1;
      opacity: 0;
    }

    /* ===== 数据统计 ===== */
    .stats-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 20px;
      margin-bottom: 40px;
      opacity: 0;
    }

    .stat-card {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
      border: 1px solid rgba(255, 255, 255, 0.1);
      transition: transform 0.3s;
    }

    .stat-card:hover {
      transform: translateY(-5px);
    }

    .stat-value {
      font-size: 36px;
      font-weight: bold;
      margin-bottom: 10px;
    }

    .stat-label {
      font-size: 16px;
      color: rgba(255, 255, 255, 0.7);
    }

    /* ===== 按钮区域 ===== */
    .action-buttons {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin-top: 40px;
      opacity: 0;
    }

    .btn {
      padding: 15px 30px;
      border-radius: 8px;
      text-decoration: none;
      font-weight: 600;
      font-size: 18px;
      transition: all 0.3s;
      display: inline-flex;
      align-items: center;
      cursor: pointer;
      border: none;
      position: relative;
      overflow: hidden;
    }

    .btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
      transition: left 0.5s;
    }

    .btn:hover::before {
      left: 100%;
    }

    .btn-primary {
      background: linear-gradient(135deg, #007bff, #0056b3);
      color: white;
      box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
    }

    .btn-success {
      background: linear-gradient(135deg, #28a745, #20c997);
      color: white;
      box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
    }

    .btn-outline {
      background: transparent;
      color: white;
      border: 2px solid rgba(255, 255, 255, 0.3);
    }

    .btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
    }

    .btn-outline:hover {
      background: rgba(255, 255, 255, 0.1);
    }

    /* ===== 段位颜色 ===== */
    .bronze { background: linear-gradient(135deg, #cd7f32, #8b4513); }
    .silver { background: linear-gradient(135deg, #c0c0c0, #a9a9a9); }
    .gold { background: linear-gradient(135deg, #ffd700, #daa520); }
    .platinum { background: linear-gradient(135deg, #e5e4e2, #b8b8b8); }
    .diamond { background: linear-gradient(135deg, #b9f2ff, #7fffd4); }
    .master { background: linear-gradient(135deg, #8a2be2, #4b0082); }
    .grandmaster { background: linear-gradient(135deg, #ff0000, #8b0000); }
    .challenger { background: linear-gradient(135deg, #1e90ff, #0000ff); }

    /* ===== 进度条 ===== */
    .progress-container {
      margin: 30px 0;
      opacity: 0;
    }

    .progress-label {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
    }

    .progress-bar {
      height: 20px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 10px;
      overflow: hidden;
    }

    .progress-fill {
      height: 100%;
      background: linear-gradient(90deg, #ffd700, #ff8c00);
      border-radius: 10px;
      width: 0;
    }

    /* ===== 粒子效果 ===== */
    .particles {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 2;
    }

    .particle {
      position: absolute;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: gold;
      opacity: 0;
    }

    /* ===== 响应式设计 ===== */
    @media (max-width: 768px) {
      .result-title {
        font-size: 48px;
      }

      .rank-badge {
        width: 150px;
        height: 150px;
      }

      .rank-icon {
        font-size: 60px;
      }

      .stats-container {
        grid-template-columns: 1fr 1fr;
      }

      .action-buttons {
        flex-direction: column;
        align-items: center;
      }
    }

    @media (max-width: 480px) {
      .result-title {
        font-size: 36px;
      }

      .stats-container {
        grid-template-columns: 1fr;
      }

      .stat-value {
        font-size: 28px;
      }
    }
  </style>
</head>
<body>
<!-- 动态星空背景 -->
<div class="stars" id="stars"></div>

<!-- 粒子效果 -->
<div class="particles" id="particles"></div>

<!-- 结算页面容器 -->
<div class="result-container">
  <!-- 结果标题 -->
  <h1 class="result-title" id="resultTitle">闯关结果</h1>

  <!-- 段位徽章 -->
  <div class="rank-badge" id="rankBadge">
    <div class="rank-icon gold">
      <i class="fas fa-crown"></i>
    </div>
    <div class="rank-glow" id="rankGlow"></div>
  </div>

  <!-- 进度条 -->
  <div class="progress-container" id="progressContainer">
    <div class="progress-label">
      <span>当前经验</span>
      <span id="expText">0 / 1000</span>
    </div>
    <div class="progress-bar">
      <div class="progress-fill" id="progressFill"></div>
    </div>
  </div>

  <!-- 数据统计 -->
  <div class="stats-container" id="statsContainer">
    <div class="stat-card">
      <div class="stat-value" id="scoreValue">0</div>
      <div class="stat-label">得分</div>
    </div>
    <div class="stat-card">
      <div class="stat-value" id="correctValue">0/5</div>
      <div class="stat-label">正确题目</div>
    </div>
    <div class="stat-card">
      <div class="stat-value" id="timeValue">00:00</div>
      <div class="stat-label">用时</div>
    </div>
    <div class="stat-card">
      <div class="stat-value" id="rankValue">青铜III</div>
      <div class="stat-label">段位</div>
    </div>
  </div>

  <!-- 按钮区域 -->
  <div class="action-buttons" id="actionButtons">
    <button class="btn btn-primary" id="retryBtn">
      <i class="fas fa-redo"></i> 重新挑战
    </button>
    <button class="btn btn-success" id="nextBtn">
      <i class="fas fa-arrow-right"></i> 下一个知识点
    </button>
    <button class="btn btn-outline" id="homeBtn">
      <i class="fas fa-home"></i> 返回主页
    </button>
  </div>
</div>

<!-- 音效元素 -->
<audio id="victorySound" preload="auto">
  <source src="@{/sounds/victory.mp3}" type="audio/mpeg">
</audio>
<audio id="defeatSound" preload="auto">
  <source src="@{/sounds/victory.mp3}" type="audio/mpeg">
</audio>
<audio id="countUpSound" preload="auto" loop>
  <source src="@{/sounds/click.mp3}" type="audio/mpeg">
</audio>
<audio id="levelUpSound" preload="auto">
  <source src="@{/sounds/hover.mp3}" type="audio/mpeg">
</audio>

<script>
  // 用户数据
  const userData = {
    score: 85,
    correctAnswers: 4,
    totalQuestions: 5,
    timeUsed: 754, // 秒
    rank: "黄金I",
    currentExp: 650,
    nextLevelExp: 1000,
    level: 5
  };

  // 动画状态
  let animationState = {
    titleShown: false,
    badgeShown: false,
    statsShown: false,
    progressShown: false,
    buttonsShown: false
  };

  // 创建星空背景
  function createStars() {
    const starsContainer = document.getElementById('stars');
    const starsCount = 150;

    for (let i = 0; i < starsCount; i++) {
      const star = document.createElement('div');
      star.className = 'star';

      // 随机位置和大小
      const size = Math.random() * 3;
      star.style.width = `${size}px`;
      star.style.height = `${size}px`;
      star.style.left = `${Math.random() * 100}%`;
      star.style.top = `${Math.random() * 100}%`;

      // 随机动画延迟
      star.style.animationDelay = `${Math.random() * 5}s`;

      starsContainer.appendChild(star);
    }
  }

  // 创建粒子效果
  function createParticles(count, x, y) {
    const particlesContainer = document.getElementById('particles');

    for (let i = 0; i < count; i++) {
      const particle = document.createElement('div');
      particle.className = 'particle';

      // 随机位置
      particle.style.left = `${x}px`;
      particle.style.top = `${y}px`;

      // 随机大小
      const size = Math.random() * 4 + 2;
      particle.style.width = `${size}px`;
      particle.style.height = `${size}px`;

      // 随机颜色
      const colors = ['#ffd700', '#ff8c00', '#ff4500', '#ff6347'];
      particle.style.background = colors[Math.floor(Math.random() * colors.length)];

      // 随机动画
      const angle = Math.random() * Math.PI * 2;
      const distance = Math.random() * 100 + 50;
      const duration = Math.random() * 1 + 0.5;

      particle.style.animation = `
          particleMove ${duration}s forwards,
          particleFade ${duration}s forwards
        `;

      particle.style.setProperty('--angle', `${angle}rad`);
      particle.style.setProperty('--distance', `${distance}px`);

      particlesContainer.appendChild(particle);

      // 移除粒子
      setTimeout(() => {
        particle.remove();
      }, duration * 1000);
    }
  }

  // 添加粒子动画关键帧
  const styleSheet = document.styleSheets[0];
  styleSheet.insertRule(`
      @keyframes particleMove {
        to {
          transform: translate(
            calc(cos(var(--angle)) * var(--distance)),
            calc(sin(var(--angle)) * var(--distance))
          );
        }
      }
    `, styleSheet.cssRules.length);

  styleSheet.insertRule(`
      @keyframes particleFade {
        0% { opacity: 1; }
        100% { opacity: 0; }
      }
    `, styleSheet.cssRules.length);

  // 播放音效
  function playSound(soundId, volume = 0.5) {
    const sound = document.getElementById(soundId);
    sound.volume = volume;
    sound.currentTime = 0;
    sound.play().catch(e => console.log("音频播放失败:", e));
  }

  // 停止音效
  function stopSound(soundId) {
    const sound = document.getElementById(soundId);
    sound.pause();
    sound.currentTime = 0;
  }

  // 格式化时间
  function formatTime(seconds) {
    const mins = Math.floor(seconds / 60);
    const secs = seconds % 60;
    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
  }

  // 显示结果标题
  function showTitle() {
    const resultTitle = document.getElementById('resultTitle');

    // 根据分数确定结果
    if (userData.score >= 80) {
      resultTitle.textContent = '闯关成功';
      resultTitle.className = 'result-title victory';
      playSound('victorySound', 0.7);
    } else if (userData.score >= 60) {
      resultTitle.textContent = '勉强通过';
      resultTitle.className = 'result-title victory';
      playSound('victorySound', 0.5);
    } else {
      resultTitle.textContent = '闯关失败';
      resultTitle.className = 'result-title defeat';
      playSound('defeatSound', 0.7);
    }

    // 标题动画
    resultTitle.style.animation = 'titleAppear 1.5s forwards';

    // 添加标题动画关键帧
    styleSheet.insertRule(`
        @keyframes titleAppear {
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
      `, styleSheet.cssRules.length);

    animationState.titleShown = true;

    // 延迟显示徽章
    setTimeout(showBadge, 800);
  }

  // 显示徽章
  function showBadge() {
    const rankBadge = document.getElementById('rankBadge');
    const rankGlow = document.getElementById('rankGlow');

    // 徽章动画
    rankBadge.style.animation = 'badgeAppear 1s forwards';

    // 添加徽章动画关键帧
    styleSheet.insertRule(`
        @keyframes badgeAppear {
          to {
            opacity: 1;
            transform: scale(1);
          }
        }
      `, styleSheet.cssRules.length);

    // 徽章光晕动画
    setTimeout(() => {
      rankGlow.style.animation = 'glowPulse 2s infinite alternate';

      // 添加光晕动画关键帧
      styleSheet.insertRule(`
          @keyframes glowPulse {
            from { transform: scale(1); opacity: 0.7; }
            to { transform: scale(1.1); opacity: 1; }
          }
        `, styleSheet.cssRules.length);

      // 创建粒子效果
      const badgeRect = rankBadge.getBoundingClientRect();
      const centerX = badgeRect.left + badgeRect.width / 2;
      const centerY = badgeRect.top + badgeRect.height / 2;

      createParticles(30, centerX, centerY);
    }, 500);

    animationState.badgeShown = true;

    // 延迟显示进度条
    setTimeout(showProgress, 800);
  }

  // 显示进度条
  function showProgress() {
    const progressContainer = document.getElementById('progressContainer');

    // 进度条容器动画
    progressContainer.style.animation = 'progressAppear 1s forwards';

    // 添加进度条容器动画关键帧
    styleSheet.insertRule(`
        @keyframes progressAppear {
          to { opacity: 1; }
        }
      `, styleSheet.cssRules.length);

    // 计算经验百分比
    const expPercentage = (userData.currentExp / userData.nextLevelExp) * 100;

    // 经验条动画
    setTimeout(() => {
      const progressFill = document.getElementById('progressFill');
      progressFill.style.transition = 'width 2s ease-out';
      progressFill.style.width = `${expPercentage}%`;

      // 经验文本动画
      animateValue('expText', 0, userData.currentExp, 2000, (value) => {
        return `${Math.floor(value)} / ${userData.nextLevelExp}`;
      });
    }, 500);

    animationState.progressShown = true;

    // 延迟显示统计
    setTimeout(showStats, 1500);
  }

  // 显示统计数据
  function showStats() {
    const statsContainer = document.getElementById('statsContainer');

    // 统计容器动画
    statsContainer.style.animation = 'statsAppear 1s forwards';

    // 添加统计容器动画关键帧
    styleSheet.insertRule(`
        @keyframes statsAppear {
          to { opacity: 1; }
        }
      `, styleSheet.cssRules.length);

    // 开始数字动画
    setTimeout(() => {
      // 播放计数音效
      playSound('countUpSound', 0.3);

      // 分数动画
      animateValue('scoreValue', 0, userData.score, 2000, (value) => {
        return Math.floor(value).toString();
      });

      // 正确题目动画
      animateValue('correctValue', 0, userData.correctAnswers, 2000, (value) => {
        return `${Math.floor(value)}/${userData.totalQuestions}`;
      });

      // 时间动画
      animateValue('timeValue', 0, userData.timeUsed, 2000, (value) => {
        return formatTime(Math.floor(value));
      });

      // 段位文本
      document.getElementById('rankValue').textContent = userData.rank;

      // 停止计数音效
      setTimeout(() => {
        stopSound('countUpSound');

        // 检查是否升级
        if (userData.currentExp >= userData.nextLevelExp) {
          playSound('levelUpSound', 0.7);

          // 升级动画效果
          const rankBadge = document.getElementById('rankBadge');
          rankBadge.style.animation = 'levelUp 0.5s ease-in-out 3';

          // 添加升级动画关键帧
          styleSheet.insertRule(`
              @keyframes levelUp {
                0%, 100% { transform: scale(1); }
                50% { transform: scale(1.2); }
              }
            `, styleSheet.cssRules.length);

          // 创建更多粒子
          const badgeRect = rankBadge.getBoundingClientRect();
          const centerX = badgeRect.left + badgeRect.width / 2;
          const centerY = badgeRect.top + badgeRect.height / 2;

          createParticles(50, centerX, centerY);
        }
      }, 2000);
    }, 500);

    animationState.statsShown = true;

    // 延迟显示按钮
    setTimeout(showButtons, 2500);
  }

  // 显示按钮
  function showButtons() {
    const actionButtons = document.getElementById('actionButtons');

    // 按钮容器动画
    actionButtons.style.animation = 'buttonsAppear 1s forwards';

    // 添加按钮容器动画关键帧
    styleSheet.insertRule(`
        @keyframes buttonsAppear {
          to { opacity: 1; }
        }
      `, styleSheet.cssRules.length);

    animationState.buttonsShown = true;
  }

  // 数字动画函数
  function animateValue(elementId, start, end, duration, formatter) {
    const element = document.getElementById(elementId);
    const range = end - start;
    const startTime = performance.now();

    function updateValue(currentTime) {
      const elapsed = currentTime - startTime;
      const progress = Math.min(elapsed / duration, 1);

      // 使用缓动函数使动画更自然
      const easeOutQuart = 1 - Math.pow(1 - progress, 4);
      const currentValue = start + (range * easeOutQuart);

      element.textContent = formatter(currentValue);

      if (progress < 1) {
        requestAnimationFrame(updateValue);
      }
    }

    requestAnimationFrame(updateValue);
  }

  // 初始化页面
  document.addEventListener('DOMContentLoaded', function() {
    createStars();

    // 显示结果标题
    setTimeout(showTitle, 500);

    // 按钮事件
    document.getElementById('retryBtn').addEventListener('click', function() {
      alert('重新挑战功能将在后续版本中实现');
    });

    document.getElementById('nextBtn').addEventListener('click', function() {
      alert('进入下一个知识点');
    });

    document.getElementById('homeBtn').addEventListener('click', function() {
      alert('返回主页');
    });
  });
</script>
</body>
</html>